import React from "react";
import { useSongList } from "@/viewModel/SongList/useSongList";
import {PageContainer} from "@ant-design/pro-components";
import {ProColumns, ProTable} from "@ant-design/pro-table/lib";

const SongList: React.FC = () => {
  const {
    actionRef,
    handleFetchListData,
  } = useSongList();


  const columns: ProColumns<API.SongListApi>[] = [
    {
      title: "序号",
      dataIndex: 'id',
      search: false
    },
    {
      title: "歌曲名",
      dataIndex: 'song_name',
      search: true,
      render: (dom, entity) => {
        console.log(entity)
        return (
          <a>
            {dom}
          </a>
        );
      },
    },
  ]

  return (
    <PageContainer>
      <ProTable
        headerTitle="点歌列表"
        actionRef={actionRef}
        scroll={{ x: 'max-content' }}
        search={{
          labelWidth: 120,
        }}
        request={handleFetchListData}
        columns={columns}
      />
    </PageContainer>
  )
}

export default SongList
